<template>
  <div class="geKeChengTiXiHuoDong">
    <div class="top-tools">
      <h3>各课程体系活动数量与参与人数</h3>
    </div>
    <div id="geKeChengTiXiHuoDong"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
export default {
  data() {
    return {
      data: [

        { name:'参与人数', title: '其他', value: 1678 ,"参与人数":1678,"活动数量":45},
        { name:'参与人数',title: '春粟劳育计划', value: 40,"参与人数":40,"活动数量":2},
        { name:'参与人数',title: '多彩青春计划', value: 1755 ,"参与人数":1755,"活动数量":53},
        { name:'参与人数',title: '红色筑梦计划', value: 14753,"参与人数":14753,"活动数量":28},
        { name:'参与人数',title: '经典悦读计划', value: 30 ,"参与人数":30,"活动数量":1},
        { name:'参与人数',title: '全球胜任力计划', value: 73 ,"参与人数":73 ,"活动数量":2},
        { name:'参与人数',title: '师长领航计划', value: 62 ,"参与人数":62,"活动数量":5},
        { name:'参与人数',title: '双创引领计划', value: 1 ,"参与人数":0,"活动数量":1},
        { name:'参与人数',title: '先锋论坛计划', value: 1 ,"参与人数":0,"活动数量":2},


        { name:'活动数量'},
        { name:'活动数量'},
        { name:'活动数量'},
        { name:'活动数量'},
        { name:'活动数量'},
        { name:'活动数量'},
        { name:'活动数量'},
        { name:'活动数量'},
        { name:'活动数量'},

      ]
    };
  },
  methods: {
    createChart() {
      const chart = new Chart({
            container: 'geKeChengTiXiHuoDong',
            autoFit: true,
            height: 290,
        });
        chart.data(this.data);
        chart.scale('参与人数', {
            nice: true,
        });
        chart.tooltip({
            showMarkers: false,
            shared: true,
        });
        chart.axis('title',{
            label:{
                style:{
                    fill:'#fff',
                    fontSize:14,
                }
            }
        })
        chart.axis('参与人数',{
            label:{
                style:{
                    fill:'#fff'
                }
            }
        })
        chart.axis('value',{
            label:{
                style:{
                    fill:'#fff'
                }
            }
        })
         chart.legend({
                itemName:{
                    style:{
                        fill:'#fff',
                        fontSize:16,
                        lineHeight:18
                    }
                },
                marker:{
                    style:{
                        r:8
                    }
                }
            })
        chart
        .interval()
        .position('title*参与人数')
        .color('name',['#00FFEE','#FF5DE4'])
        .size(16)

        chart.area().position('title*活动数量')
        .color('#FF5DE4')
        .shape('smooth').tooltip('活动数量');

        
        chart.line().position('title*活动数量')
        .color('#FF5DE4')
        .shape('smooth').tooltip(false);

        
        chart.point().position('title*活动数量')
        .color('#FF5DE4')
        .shape('circle').tooltip(false);


        chart.interaction('active-region');
        chart.render();
    }
  },
  mounted() {
    this.createChart();
  }
};
</script>

<style lang="scss" scoped>
.geKeChengTiXiHuoDong {
  padding: 20px;
  .top-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    h3 {
      font-size: 16px;
      height: 16px;
      line-height: 16px;
      padding-left: 10px;
      border-left: 4px solid #00ffee;
    }
  }
}
</style>